<template>
  <div>
    <!-- 文件列表 -->
    <div class="file-box">
      <div class="file-item" v-for="item in fileList" :key="item.id">
        <img :src="formatIcon(item.resType)" />
        <div class="file-name ml10" @click="downLoad(item)">{{ item.name }}</div>
        <div class="file-time ml10">{{ formatTime(item.createTime) }}</div>
        <div class="file-operator ml10">{{ item.operator }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { download } from '@/api/km.js'
import { useStore } from '@/pinia/index'
import dayjs from 'dayjs'
const pinia = useStore()
defineProps({
  fileList: {
    type: Array,
    default: () => []
  }
})
//计算属性 代替 vue2 filter 格式化时间
const formatTime = computed(() => {
  return (time: string) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
  }
})
// 文件列表图标
const iconType = ref({
  txt: 'txt',
  xls: 'excel',
  xlsx: 'excel',
  png: 'image',
  jpg: 'image',
  jpeg: 'image',
  pdf: 'pdf',
  doc: 'word',
  docx: 'word'
})
const formatIcon = computed(() => {
  return (type: string) => {
    return new URL(`/src/assets/img/${iconType.value[type]}.png`, import.meta.url).href
  }
})
//点击文名件下载
const downLoad = async (item: any) => {
  const res = await download({ fileName: item.id,fileType:item.resType })
  const blob = new Blob([res])
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = item.name
  link.click()
}
</script>

<style lang="scss" scoped>
.file-box {
  .file-item {
    display: flex;
    margin-bottom: 10px;
    margin-top: 10px;
    img {
      width: 20px;
      height: 20px;
    }
    .file-name {
    }
    .file-time {
    }
    .file-operator {
    }
  }
}
</style>
